<script setup lang="ts">
import { CheckOrderApi } from '@/api/check-order';
import AuthBar from '@/components/authBar/index.vue';
import { useRequest } from '@/hooks/useRequest';
import { buildAssetSource } from '@/utils';
import { currRoute } from '@/utils/router.utils';

const { query } = currRoute();

const { data: orderDetail } = useRequest(() => CheckOrderApi.getCheckOrderDetail(query.orderNo));

function handleNext() {
  uni.reLaunch({
    url: '/pages/index/index'
  });
}
</script>

<template>
  <view class="plan-pay flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="success-icon m-auto mt-70">
        <image :src="buildAssetSource('dui.png')" class="h-134 w-134" />
      </view>
      <view class="page-title mt-55">
        缴纳体检费用
      </view>
      <view class="page-subtitle">
        请选择您方便的体检日期和时间段
      </view>
      <view class="page-content px-48">
        <view class="pay-info mt-60">
          <view class="pay-info__title">
            订单信息
          </view>
          <view class="pay-info__group">
            <view class="pay-cell">
              <view class="pay-cell__title">
                预约单号
              </view>
              <view class="pay-cell__value">
                {{ orderDetail?.orderNo }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                体检套餐
              </view>
              <view class="pay-cell__value">
                {{ orderDetail?.packageName }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                预约日期
              </view>
              <view class="pay-cell__value">
                {{ orderDetail?.appointmentDate }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                预约时间
              </view>
              <view class="pay-cell__value">
                {{ orderDetail?.timePeriod }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                体检中心地址
              </view>
              <view class="pay-cell__value">
                {{ orderDetail.checkAddress }}
              </view>
            </view>
            <view class="slider" />
            <view class="pay-cell pay-cell__total">
              <view class="pay-cell__title">
                支付金额
              </view>
              <view class="pay-cell__value">
                ¥{{ orderDetail?.totalFee }}
              </view>
            </view>
          </view>
        </view>

        <view class="mt-50 flex-center">
          <view class="next-btn w-708">
            <wd-button block @click="handleNext">
              完成
            </wd-button>
          </view>
        </view>
      </view>

      <view class="mt-65 px-48">
        <view class="page-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 体检须知
          </view>
          <view class="tips-content">
            <view>
              体检当天请携带本人有效身份证件，于预约时间前15分钟到达体检中心 体检前一天晚餐宜清淡，晚上8点后不再进食，保持空腹状态 体检当天请穿着宽松舒适的衣物，避免佩戴金属饰品 如有特殊病史或正在服用药物，请提前告知医护人员 自动打印预约凭条
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '体检预约',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.plan-pay {
  background-color: var(--bg-color);
  height: 100%;

  .success-icon {
    @apply flex-center;
    width: 220px;
    height: 220px;
    background: #e5efff;
    border-radius: 50%;
  }

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .page-subtitle {
    text-align: center;
    font-size: 28px;
    color: var(--secondary-text-color);
    max-width: 524px;
    margin: 0 auto;
  }

  .pay-info {
    background: #e2ecfc;
    border-radius: 20px;
    padding: 23px 40px;

    .pay-info__title {
      font-size: 32px;
      font-weight: 500;
      color: var(--secondary-text-color);
    }

    .pay-info__group {
      margin-top: 20px;
      .pay-cell {
        @apply flex justify-between items-center;
        color: var(--text-color);
        margin-bottom: 20px;

        .pay-cell__title {
          font-size: 32px;
          font-weight: 500;
          font-weight: 400;
          font-size: 32px;
        }

        .pay-cell__value {
          font-size: 32px;
          font-weight: 500;
          font-weight: 500;
          font-size: 32px;
        }
        &.pay-cell__total {
          .pay-cell__title {
            font-size: 36px;
            font-weight: bold;
          }
          .pay-cell__value {
            font-size: 36px;
            font-weight: bold;
          }
        }
      }
      .slider {
        height: 1px;
        background: var(--primary);
        margin: 40px 0;
      }
    }
  }

  .next-btn {
    --wot-button-medium-height: 89px;
    --wot-button-medium-fs: 36px;
    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 32px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
